﻿@using ModelLayer
@using ModelLayer.Common
@using ShopKart.Areas.User.Models
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    IEnumerable<Category> categories = ((IEnumerable<Category>)ViewData["Categories"]);
    UserCartVm userCartVm = new UserCartVm()
    {
        UserCarts = ((IEnumerable<UserCart>)ViewData["UserCart"])
    };
}

@section Stylesheets
{
    @RenderSection("Stylesheets", false)
}

@section PageTop{
    <div class="page-top">
        <div class="page-actions pull-left">
            <h3 class="page-title">@ViewBag.Title</h3>
        </div>
        <!-- BEGIN TOP NAVIGATION MENU -->
        <div class="top-menu">
            <ul class="nav navbar-nav pull-right">
                <!-- BEGIN NOTIFICATION DROPDOWN -->
                <!-- DOC: Apply "dropdown-dark" class after below "dropdown-extended" to change the dropdown styte -->
                <li class="dropdown dropdown-inbox" id="header_inbox_bar">
                    @RenderSection("QuickLinks", false)
                </li>
                <!-- DOC: Apply "dropdown-dark" class after below "dropdown-extended" to change the dropdown styte -->
                <li class="dropdown dropdown-extended dropdown-notification" id="header_notification_bar">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
                        <i class="fa fa-shopping-cart">
                        </i> <span class="badge badge-default"> 0 </span>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="external">
                            <h3 id="cartCount"><span class="bold">0 Products</span> in Cart</h3>
                            <a href="@Url.Action("CheckOut","Common",new {area="User"})">Check Out</a>
                        </li>
                        <li>
                            <ul id="userCart" class="dropdown-menu-list scroller" style="height: 250px;" data-handle-color="#637283">
                                @{
                                    Html.RenderPartial("~/Areas/User/Views/Shared/_UserCart.cshtml", userCartVm);
                                }
                            </ul>
                        </li>
                    </ul>
                </li>

                <!-- BEGIN USER LOGIN DROPDOWN -->
                <!-- DOC: Apply "dropdown-dark" class after below "dropdown-extended" to change the dropdown styte -->
                <li class="dropdown dropdown-user">
                    @if (Request.IsAuthenticated)
                    {
                        <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
                            <img alt="" class="img-circle" src="~/Content/Template/assets/admin/layout2/img/avatar3_small.jpg" />
                            <span class="username username-hide-on-mobile">

                                @if (Session["SessionObject"] != null)
                                {
                                    var so = ((SessionObject)Session["SessionObject"]);
                                    @(so.User.FirstName + " " + so.User.LastName)
                                }
                                else
                                {

                                }
                            </span>
                            <i class="fa fa-angle-down"></i>
                        </a>

                        <ul class="dropdown-menu dropdown-menu-default">
                            <li>
                                <a href="#" class="btnEditUserProfile">
                                    <i class="fa fa-user"></i> My Profile
                                </a>
                            </li>
                            <li class="divider"> </li>
                            <li>
                                @using (Html.BeginForm("LogOff", "Account", new { area = "" }, FormMethod.Post, new { id = "logoutForm", @class = "logoutlink" }))
                                {
                                    @Html.AntiForgeryToken()
                                    <a href="javascript:document.getElementById('logoutForm').submit()">
                                        <i class="icon-key"></i> Log Out
                                    </a>
                                }
                            </li>
                        </ul>
                    }
                    else
                    {
                        <a href="@Url.Action("Login", "Account", new { area = "" })">Login</a>
                    }
                </li>
                <!-- END USER LOGIN DROPDOWN -->
            </ul>
        </div>
        <!-- END TOP NAVIGATION MENU -->
        <!-- BEGIN HEADER SEARCH BOX -->
        <!-- DOC: Apply "search-form-expanded" right after the "search-form" class to have half expanded search box -->

        <div class="pull-right">
            @RenderSection("PageSearch", false)
        </div>
        <!-- END HEADER SEARCH BOX -->
    </div>

}


@section SideBar
{
    <div class="page-sidebar-wrapper">
        <div class="page-sidebar navbar-collapse collapse">
            <!-- BEGIN SIDEBAR MENU -->
            <!-- DOC: Apply "page-sidebar-menu-light" class right after "page-sidebar-menu" to enable light sidebar menu style(without borders) -->
            <!-- DOC: Apply "page-sidebar-menu-hover-submenu" class right after "page-sidebar-menu" to enable hoverable(hover vs accordion) sub menu mode -->
            <!-- DOC: Apply "page-sidebar-menu-closed" class right after "page-sidebar-menu" to collapse("page-sidebar-closed" class must be applied to the body element) the sidebar sub menu mode -->
            <!-- DOC: Set data-auto-scroll="false" to disable the sidebar from auto scrolling/focusing -->
            <!-- DOC: Set data-keep-expand="true" to keep the submenues expanded -->
            <!-- DOC: Set data-auto-speed="200" to adjust the sub menu slide up/down speed -->
            <ul class="page-sidebar-menu page-header-fixed" data-keep-expanded="false" data-auto-scroll="false" data-slide-speed="400">

                <!-- Dashboard li tab -->
                <li class="nav-item start active open">
                    <a href="@Url.Action("Index", "Dashboard", new {area = "User"})">
                        <i class="fa fa-dashboard"></i>
                        <span class="title">Dashboard</span>
                    </a>
                </li>
                <!-- Dashboard li tab -->
                <li class="nav-item start active open">
                    <a href="javascript:;">
                        <i class="fa fa-cog"></i>
                        <span class="title">Categories</span>
                    </a>
                    @BuildMenu(categories)
                </li>

            </ul>
            <!-- END SIDEBAR MENU -->
        </div>
    </div>
}

<div id="EditUserProfile" class="modal fade"></div>


@RenderBody()



@section scripts
{
    @RenderSection("scripts", false)

    @*<script src="~/Scripts/Shopkart/googleMapsApi.js"></script>
    <script src="~/Scripts/Shopkart/gMaps.js"></script>*@

    <script type="text/javascript">
        $(function () {

            $('#btnAddProductToCart').on('click', function () {
                var productId = $(this).data('id');

                var UserCart = {
                    ProductId: productId,
                    UserId: "1"
                }

                $("#btnAddProductToCart").sKartAjax({
                    url: '@Url.Action("AddProductToCart", "Common", new {area = "User"})',
                    method: "POST",
                    data: JSON.stringify(UserCart),
                    processData: false,
                    loaderButtonSelector: '#btnAddProductToCart',
                    contentType: "application/json; charset=utf-8",
                    success: function (data, textStatus, jqXhr) {
                        LoadUserCart();
                    }
                });
            });
        });

        $(document.body).on("click", ".btnEditUserProfile", function (e) {
            e.preventDefault();
            var ProductId = $(this).data("id");

            //Open Popup
            $("#EditUserProfile").skartOpenModal({
                // title: "Add Source Sub-Product",
                title: "Update Profile",
                url: '@Url.Action("EditUserProfile", "User", new {area = "User"})',
                data: { ProductId: ProductId }
            });
        });

        function onSuccessUserProfile(data, textStatus, jqXhr) {
            //Inject data in modal
            $("#EditUserProfile .modal-body-footer").html(data);
            //Show toastr success message and close popup
            UIToastr.ShowSuccessToaster($("#messageType", "#EditUserProfile").val(), $("#validationMessage", "#EditUserProfile").val(), "", "#EditUserProfile");
        }

        function LoadUserCart() {
            $("#userCart").skartAjax({
                //TODO: Remove hardcoded value.
                url: '@Url.Action("GetUserCart", "Common", new {area = "User"})' + '?userId=1',
                processData: false,
                contentType: "application/json; charset=utf-8",
                success: function (data, textStatus, jqXhr) {
                    $("#userCart").html(data);
                }
            });
        }
    </script>
}


@helper BuildMenu(IEnumerable<Category> categories, long? parentId = 0, int menuLevel = 2)
{
    var subCategories = categories.Where(d => d.ParentId == parentId).OrderBy(i => i.CategoryId);
    if (subCategories.Any())
    {
        <ul class="sub-menu">
            @foreach (var item in subCategories)
            {
                <li>
                    <a href="@Url.Action("Products", "Product", new {area = "User", categoryId = @item.CategoryId})">
                        <i class="fa fa-bitbucket"></i> @item.CategoryName
                    </a>
                    @BuildMenu(categories, item.CategoryId, menuLevel + 1)
                </li>
            }
        </ul>
    }
}

@functions
{
    public static bool HasChild(IEnumerable<Category> categories, long categoryId = 0)
    {
        return categories.Any(x => x.ParentId == categoryId);
    }
}
